<template>
    <div class="wrap">
        <div>
            <h1>博客列表</h1>
        </div>
        <div class="add">
            <el-button type="primary" @click="handleAdd">添加博客</el-button>
        </div>
        <div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column label="id" prop="blogId" width="180">
                </el-table-column>
                <el-table-column prop="blogTitle" label="标题" width="180">
                </el-table-column>

                <el-table-column prop="userId" label="作者" width="180">
                </el-table-column>
                <el-table-column prop="imageName" label="博客封面" width="180">
                    <template slot-scope="scope">
                        <img :src="scope.row.imageName" alt="" width="100" height="100">
                    </template>
                </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page">
            <el-pagination background layout="prev, pager, next" :current-page="currentPage" :page-size="pageSize"
                @current-change="changePageNum" :total="total">
            </el-pagination>
        </div>
        <div>
            <el-dialog title="添加博客" :visible.sync="addFormVisible">
              <el-form :model="addForm">
                <el-form-item label="博客标题" :label-width="formLabelWidth">
                  <el-input v-model="addForm.blogTitle" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="博客内容" :label-width="formLabelWidth">
                  <el-input v-model="addForm.blogContext" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="是否分享" :label-width="formLabelWidth">
                  <el-input v-model="addForm.blogShare" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="博客封面" :label-width="formLabelWidth">
                  <el-input v-model="addForm.imageName" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="addFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitAddBlog">提交信息</el-button>
              </div>
            </el-dialog>
        </div>
        <div>
            <el-dialog title="修改博客" :visible.sync="editFormVisible">
              <el-form :model="editForm">
                <el-form-item label="博客标题" :label-width="formLabelWidth">
                  <el-input v-model="editForm.blogTitle" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="博客内容" :label-width="formLabelWidth">
                  <el-input v-model="editForm.blogContext" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="是否分享" :label-width="formLabelWidth">
                  <el-input v-model="editForm.blogShare" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="博客封面" :label-width="formLabelWidth">
                  <el-input v-model="editForm.imageName" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitEditBlog">修改信息</el-button>
              </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import {
        getBlogsByPage,
        deleteBlogById,
        addBlog,
        getBlogById,
        updateBlogById
    } from '../api/api.js'
    export default {
        data() {
            return {
                tableData: [],
                total: 0,
                currentPage: 1,
                pageSize: 3,
                formLabelWidth: '120px',
                addFormVisible: false,
                editFormVisible: false,
                addForm: {
                    blogTitle: '',
                    blogContext: '',
                    blogShare: 0,
                    imageName: '',
                    userId: 0
                },
                editForm: {
                    blogId: 0,
                    blogTitle: '',
                    blogContext: '',
                    blogShare: 0,
                    imageName: '',
                    userId: 0
                }
            }
        },

        // dom创建成功后的钩子函数
        created() {
            // 获取当前登录用户ID
            let userInfo = window.sessionStorage.getItem("userInfo")
            let user = JSON.parse(userInfo)
            this.addForm.userId = user.userId
            
            // 获取第一页列表
            getBlogsByPage({
                    pageNum: 1,
                    pageSize: 3
                })
                .then(res => {
                    console.log(res.data);
                    let result = res.data
                    this.tableData = result.data.records
                    this.total = result.data.total
                    this.currentPage = result.data.current
                    this.pageSize = result.data.size
                })
                .catch(err => {
                    console.log(err);
                })
        },
        methods: {
            handleEdit(id, row) {
                console.log(id, row);
                let blogId = row.blogId
                
                // 显示编辑对话框
                this.editFormVisible = true
                
                // 获取回显博客信息
                getBlogById({id:blogId})
                .then(res=>{
                    if(res.data.code === 200) {
                        this.editForm.blogId = res.data.data.blogId
                        this.editForm.blogContext = res.data.data.blogContext
                        this.editForm.blogTitle = res.data.data.blogTitle
                        this.editForm.blogShare = res.data.data.blogShare
                        this.editForm.imageName = res.data.data.imageName
                        this.editForm.userId = res.data.data.userId
                    }
                })
            },
            handleDelete(id, row) {
                console.log(id, row);
                let blogId = row.blogId

                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteBlogById({
                            id: blogId
                        })
                        .then(res => {
                            console.log(res);
                            this.$message.error(res.data.msg);
                            this.changePageNum(this.currentPage)
                        })
                        .catch(err => {
                            console.log(err);
                            this.$message.error("删除失败");
                        })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });


            },
            changePageNum(pageNum) {
                console.log(pageNum);
                getBlogsByPage({
                        pageNum: pageNum,
                        pageSize: this.pageSize
                    })
                    .then((res) => {
                        console.log(res.data);
                        let result = res.data
                        this.tableData = result.data.records
                        this.total = result.data.total
                        this.currentPage = result.data.current
                        this.pageSize = result.data.size
                    })
                    .catch(err => {
                        console.log(err);
                    })
            },
            handleAdd() {
                console.log("add...");
                this.addFormVisible = true
            },
            submitAddBlog() {
                addBlog(this.addForm)
                .then( res => {
                    console.log("add success", res);
                    this.changePageNum(this.currentPage)
                    this.addFormVisible = false
                    this.$message({
                        type: 'success',
                        message: '添加成功了'
                    });
                })
            },
            submitEditBlog() {
                //--1 隐藏窗口
                this.editFormVisible = false
                
                //--2 向后端提交接口
                updateBlogById(this.editForm)
                .then( res => {
                    console.log("edit success", res);
                    // 刷新页面
                    this.changePageNum(this.currentPage)
                    this.$message({
                        type: 'success',
                        message: '修改成功了'
                    });
                })
            }
        }
    }
</script>

<style>
    .page {
        margin-top: 20px;
    }
    .add {
        text-align: left;
    }
</style>
